<template>
  <div class="userAdd">
    <el-dialog v-bind="$attrs" :visible.sync="showDialog" v-on="$listeners" @open="onOpen" @close="onClose" v-dialog-drag title="">
          <el-row :gutter="15">
            <el-form ref="elForm" :model="addMenuVO" :rules="rules" size="medium" label-width="100px">
              <el-col :span="12">
                <el-form-item label="菜单名称" prop="roleName">
                  <el-input v-model="addMenuVO.name" placeholder="请输入菜单名称"  :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
                <el-form-item label="父菜单名称" prop="remark">
                  <el-select v-model="addMenuVO.parentId" placeholder="请选择父菜单名称">
                    <el-option
                      v-for="item in parentMenuList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                      <span style="float: left">{{ item.name }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">
                <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.id }}</span>
              </span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="菜单状态" prop="remark">
                  <el-select v-model="addMenuVO.available" placeholder="请选择菜单状态">
                    <el-option
                      v-for="item in MenuAvailableList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                      <span style="float: left">{{ item.name }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">
                <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.id }}</span>
              </span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="菜单标识" prop="icon">
                  <el-input v-model="addMenuVO.icon" placeholder="请输入菜单标识" clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="菜单path" prop="path">
                  <el-input v-model="addMenuVO.path" placeholder="请输入菜单path" clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="菜单排序" prop="orderNum">
                  <el-input v-model="addMenuVO.orderNum" placeholder="请输入排序号" clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="saveMenu('elForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import AddUserSmail from '@/views/users/AddUserSmail'
import  ImageCropper from '../../components/ImageCropper'
import  PanThumb from '../../components/PanThumb'
import {deleteImage} from '@/api/image'
import {saveUser } from '@/api/users'
import {findPermissionsByName} from '@/api/menu'
import {findUsers} from '@/api/users'
import {saveRMPUss} from '@/api/role'
import {findMenusToPa} from '@/api/menu'
import {saveOrUpdateMenu} from '@/api/menu'

export default {
  inheritAttrs: false,
  components: {
    ImageCropper,
    PanThumb,
    AddUserSmail
  },
  props: {
    addVisible:{
      type : Boolean,
      default:false
    },
  },
  data() {
    return {
      parentMenuList:[],
      multipleSelection:[],
      showDialog: false,
      addMenuVO: {
        id: null,
        name: null,
        parentId: '',
        available: undefined,
        orderNum: undefined,
        icon:'',
        path:'',
      },
      rules: {
        name: [{
          required: true,
          message: '请输入菜单名',
          trigger: 'blur'
        }],
        parentId: [{
          required: true,
          message: '请输父菜单',
          trigger: 'change'
        }],
        available: [{
          required: true,
          message: '请选择菜单状态',
          trigger: 'blur'
        }],
        orderNum: [{
          required: true,
          message: '请输入排序号',
          trigger: 'blur'
        }],
        icon: [{
          required: true,
          message: '请输入菜单标识',
          trigger: 'blur'
        }],
      },
      MenuAvailableList:[
        {id: 0,name:"0-不可用"},
        {id: 1,name:"1-可用"},
      ]
    }
  },
  computed: {

  },
  watch: {
    addVisible:function(){
      this.showDialog = this.addVisible
      findMenusToPa().then(res=>{
        this.parentMenuList=res.data.data
        let menu ={
          id : 0,
          name:'无父菜单'
        }
        this.parentMenuList.push(menu)
      })
    },
    parentMenuList:function(){

    },
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onOpen() {},
    onClose() {
      this.$refs['elForm'].resetFields()
      console.log("onClose");
      this.$emit('changeShowAdd','false')
      this.roleId=''
      this.upRoleVO={}
    },
    close() {
      console.log("Close");
      // this.$emit('update:visible', false)
      this.$emit('changeShowAdd','false')
      this.roleId=''
    },
    //弹窗后触发
    handleClose(){
      //子组件调用父组件方法，并传递参数
      this.$emit('changeShow','false')
    },
    // 上传成功后的回调函数
    cropSuccess (data) {
      let oldImage = this.image;
      //使用该属性保存上传之前的图片
      this.imagecropperShow = false
      this.upUserVO.avatar = this.image = data.msg
      // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
      //上传头像成功后  删除之前的头像
      this.deleteAvater(oldImage)
    },
    // 关闭上传组件
    closeImage () {
      this.imagecropperShow = false
      // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    async deleteAvater(oldImage){
      const {data} = await deleteImage(oldImage)
    },
    parentClick(a){
      //根据点击的用户名称  查询用户拥有的角色
    },
    saveMenu(){
      //调用保存  角色对应的角色信息 菜单 交易 用户
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          saveOrUpdateMenu(this.addMenuVO).then(res => {
            if(res.data.code == 200){
              this.$emit('changeShowAdd','false')
              this.$emit('findMenusByPages')
              this.addMenuVO = {}
              this.$notify.success({
                title:'操作成功',
                message:'菜单信息添加成功'
              })
            }else{
              return this.$message.error('菜单信息添加失败:')
            }
          })
        } else {
          return this.$message.error('菜单信息不完整')
        }
      });
    },
  }
}

</script>
<style lang = "less" scoped>
.el-upload__tip {
  line-height: 1.2;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 500px;
  display: block;
}
.el-dialog__body{
  height: 450px;
  width: 700px;
}
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
//.el-tab-pane{
//  height: 400px;
//  overflow-y: scroll;
//}
.abc{
  height: 400px;
  overflow-y: scroll;
}
.abc1{
  width: 500px;
}
.el-divider{
  margin: 5px;

}
</style>
